<template>
  <!-- 详情信息 -->
  <div class="detail">
    <div class="topItem">
      <div class="logo"><img :src="detail.logo" alt=""></div>
    </div>
    <div class="centerItem">
      <div class="videoBox"><img class="img" :src="detail.video" alt=""></div>
      <div class="detailBox">
        <div class="de_item1">
          <h3 class="title">{{detail.title}}</h3>
        </div>
        <div class="de_item2">
          <span v-if="detail.corporate" class="corporate">{{detail.corporate}}</span>
          <div v-if="detail.score" class="score">评分 ：{{detail.score}}</div>
        </div>
        <div class="de_item3">
          <div>年份：{{detail.year}}&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</div>
          <div>地区：{{detail.are}}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</div>
          <div>集数：共{{detail.total}}集</div>
        </div>
        <div class="de_item4">
          <div>导演：{{detail.director}}&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</div>
          <div>主演：{{detail.actor}}</div>
        </div>
        <div class="de_item5">
          <div class="intr">简介：{{introduction}}</div>
          <div class="btn">展开全部</div>
        </div>
        <div class="de_item6">
          <div class="play">播放</div>
          <div class="collect">收藏</div>
          <template v-if="widgetData.isShow==0&&widgetData.value.length>0">
            <div class="recomm" v-for="(item,index) in widgetData.value" :key="'a'+index" 
              :class="{'comBorder':comClass=='a'+index}"
              @click="handleClick($event,widgetData,item,'a'+index)">
              <span>{{item.name}}</span>
              <i @click.stop="deleteItem($event,widgetData,item,index)" class="el-icon-error"></i>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSubStr } from '@/commont/utils/stringUtil.js'
export default {
  components: {},
  props: {
    widgetData: {
      type: Object,
      required: true
    },
    comClass:{
      type: null,
      default: null
    },
    // 热力图
    mapData:{
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      detail: this.widgetData.detail,
    }
  },
  computed: {
    introduction(){
      return getSubStr(this.detail.introduction,110,true)
    }
  },
  watch: {},
  created () {},
  mounted () {},
  updated () {},
  methods: {
    // 属性
    handleClick(e,items,item,idx){
      this.$emit('detailRecomm',e,items,item,idx)
    },
    // 删除
    deleteItem(e,items,item,index){
      this.$emit('deleteItem',e,items,item,index)
    },
  },
  filters: {},
}
</script>

<style lang="less" scoped>
.detail{
  width: 100%;
  height: 100%;
  padding: 10px;
  // background: url('../../../../assets/images/bg.png');
  position: relative;
  .bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }
  .topItem{
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .logo{
      margin-right: 20px;
    }
  }
  .centerItem{
    width: 100%;
    height: 90%;
    display: flex;
    padding: 5px;
    margin-top: -25px;
    .videoBox{
      width: 40%;
      margin-top: 10px;
      .img{
        border-radius: 10px;
      }
    }
    .detailBox{
      width: calc(100% - 350px);
      height: 310px;
      margin-left: 15px;
      color: #FFFFFF;
      .de_item1{
        .title {
          font-size: 24px;
        }
      }
      .de_item2{
        margin-top: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .corporate{
          color: #174c8e;
          background-color: #41bff2;
          font-size: 18px;
          padding: 3px 5px;
          border-radius: 15px;
        }
        .score{
          font-size: 20px;
          color: #ffde00;
        }
      }
      .de_item3,.de_item4{
        display: flex;
        margin-top: 15px;
        font-size: 20px;
      }
      .de_item5{
        display: flex;
        margin-top: 15px;
        font-size: 20px;
        position: relative;
        .intr{
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;    /*弹性伸缩盒子*/
          -webkit-box-orient: vertical; /*子元素垂直排列*/
          -webkit-line-clamp: 3;   /*可以显示的行数，超出部分用...表示*/
        }
        .btn{
          width: 100px;
          height: 30px;
          line-height: 28px;
          color: #519ac4;
          text-align: center;
          position: absolute;
          right: 0;
          top: 55px;
          border: 1px solid;
          border-radius: 5px;
        }
      }
      .de_item6{
        display: flex;
        margin-top: 20px;
        font-size: 22px;
        .play,.collect{
          width: 100px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          background-color: #5dace0;
          border-radius: 5px;
        }
        .collect{
          margin-left: 20px;
        }
        .recomm{
          width: 100px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          background-color: #5dace0;
          border-radius: 5px;
          margin-left: 20px;
          position: relative;
          &:hover{
            .el-icon-error{
              display: block;
            }
          }
          .el-icon-error{
            position: absolute;
            right: -10px;
            top: -6px;
            color: red;
            font-size: 25px;
            cursor: pointer;
            display: none;
            z-index: 9999;
          }
        }
      }
      .comBorder{
        box-shadow: rgba(202,38,250,0.8) 0px 0px 10px 5px;
      }
    }
  }
}
</style>